<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文章1</title>
        <link rel="stylesheet" href="css/reset.css">
        <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/article.css">
        <style>
            .swiper-container{
                width: 100%;
                /* 整体swiper风格 */
                /* --swiper-theme-color:red; */

                /* 单独设置pagination风格 */
                --swiper-pagination-color:green; /* 分页器颜色 */
                --swiper-navigation-color: yellow; /* 前进后退按钮颜色 */
                --swiper-navigation-size: 30px; /* 前进后退按钮大小 */
            }
            .swiper-pagination-bullet {
                background-color: #fff;
                opacity: 1;
            }

            .swiper-pagination-bullet-active {
                background-color: red;
            }
            
            /* .swiper-pagination-bullet:nth-child(1){
                background-color: red;
            }
            .swiper-pagination-bullet:nth-child(2){
                background-color: white;
            }
            .swiper-pagination-bullet:nth-child(3){
                background-color: yellow;
            } */
        </style>
    </head>
    <body>
        <header>
            <div class="message">
                <img src="assets/img/threerow.png" alt="">
            </div>
            <div class="logo-box">
                <img src="assets/img/logo.png" alt="">
            </div>
            <div class="empty">

            </div>
            <div class="search-box">
                <a href="search.html">
                    <img src="assets/img/search-logo.png" alt="">
                </a>
            </div>
            <a href="./article2.html#sign">
                <div class="redcircle">
                    1
                </div>
            </a>
        </header>

        <section class="content">
            <div class="whitebg">

            </div>

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/article-pic1.png" alt="">
                            <div class="mask">
                                <p>[专业IMC平台]</p>
                                <p>太子金涂鸦大赛网络整合营销传播</p>
                                <!-- <div class="radio">
                                    <img src="assets/img/radio.png" alt="">
                                </div> -->
                            </div>
                            
                            
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/article-pic1.png" alt="">
                            <div class="mask">
                                <p>[专业IMC平台]</p>
                                <p>太子金涂鸦大赛网络整合营销传播</p>
                                <!-- <div class="radio">
                                    <img src="assets/img/radio.png" alt="">
                                </div> -->
                            </div>
                            
                            
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/article-pic1.png" alt="">
                            <div class="mask">
                                <p>[专业IMC平台]</p>
                                <p>太子金涂鸦大赛网络整合营销传播</p>
                                <!-- <div class="radio">
                                    <img src="assets/img/radio.png" alt="">
                                </div> -->
                            </div>
                            
                            
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                
                <!-- 如果需要导航按钮(左右箭头) -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                
                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
            

            <div class="wrapper">
                <div class="rowbox">
                    <div class="box">
                        <img src="assets/img/article-pic2.png" alt="">
                        
                            <p>
                                海天“晒“宴，和汪涵一起，参观海天酱油......
                            </p>
                        
                        <div class="sell">
                            <button>
                                营销
                            </button>
                            <span>
                                <img src="assets/img/grey-love.png" alt="">
                                120
                            </span>
                            <span>
                                <img src="assets/img/grey-eye.jpg" alt="">
                                666
                            </span>
                        </div>
                        <div class="time">
                            
                            <img src="assets/img/article-girl.png" class="imgb" alt="">    
                            <span>   
                                叶巧岚
                            </span>
                            <span>
                                2015年1月20日
                            </span>
                        </div>
                    
                    </div>
                    <div class="box">
                        <img src="assets/img/article-pic2.png" alt="">
                        
                            <p>
                                海天“晒“宴，和汪涵一起，参观海天酱油......
                            </p>
                        
                        <div class="sell">
                            <button>
                                营销
                            </button>
                            <span>
                                <img src="assets/img/grey-love.png" alt="">
                                120
                            </span>
                            <span>
                                <img src="assets/img/grey-eye.jpg" alt="">
                                666
                            </span>
                        </div>
                        <div class="time">
                            
                            <img src="assets/img/article-girl.png" class="imgb" alt="">    
                            <span>   
                                叶巧岚
                            </span>
                            <span>
                                2015年1月20日
                            </span>
                        </div>
                    
                    </div>
                </div>
                <div class="rowbox">
                    <div class="box">
                        <img src="assets/img/article-pic2.png" alt="">
                        
                            <p>
                                海天“晒“宴，和汪涵一起，参观海天酱油......
                            </p>
                        
                        <div class="sell">
                            <button>
                                营销
                            </button>
                            <span>
                                <img src="assets/img/grey-love.png" alt="">
                                120
                            </span>
                            <span>
                                <img src="assets/img/grey-eye.jpg" alt="">
                                666
                            </span>
                        </div>
                        <div class="time">
                            
                            <img src="assets/img/article-girl.png" class="imgb" alt="">    
                            <span>   
                                叶巧岚
                            </span>
                            <span>
                                2015年1月20日
                            </span>
                        </div>
                    
                    </div>
                    <div class="box">
                        <img src="assets/img/article-pic2.png" alt="">
                        
                            <p>
                                海天“晒“宴，和汪涵一起，参观海天酱油......
                            </p>
                        
                        <div class="sell">
                            <button>
                                营销
                            </button>
                            <span>
                                <img src="assets/img/grey-love.png" alt="">
                                120
                            </span>
                            <span>
                                <img src="assets/img/grey-eye.jpg" alt="">
                                666
                            </span>
                        </div>
                        <div class="time">
                            
                            <img src="assets/img/article-girl.png" class="imgb" alt="">    
                            <span>   
                                叶巧岚
                            </span>
                            <span>
                                2015年1月20日
                            </span>
                        </div>
                    
                    </div>
                </div>
                <div class="rowbox">
                    <div class="box">
                        <img src="assets/img/article-pic2.png" alt="">
                        
                            <p>
                                海天“晒“宴，和汪涵一起，参观海天酱油......
                            </p>
                        
                        <div class="sell">
                            <button>
                                营销
                            </button>
                            <span>
                                <img src="assets/img/grey-love.png" alt="">
                                120
                            </span>
                            <span>
                                <img src="assets/img/grey-eye.jpg" alt="">
                                666
                            </span>
                        </div>
                        <div class="time">
                            
                            <img src="assets/img/article-girl.png" class="imgb" alt="">    
                            <span>   
                                叶巧岚
                            </span>
                            <span>
                                2015年1月20日
                            </span>
                        </div>
                    
                    </div>
                    <div class="box">
                        <img src="assets/img/article-pic2.png" alt="">
                        
                            <p>
                                海天“晒“宴，和汪涵一起，参观海天酱油......
                            </p>
                        
                        <div class="sell">
                            <button>
                                营销
                            </button>
                            <span>
                                <img src="assets/img/grey-love.png" alt="">
                                120
                            </span>
                            <span>
                                <img src="assets/img/grey-eye.jpg" alt="">
                                666
                            </span>
                        </div>
                        <div class="time">
                            
                            <img src="assets/img/article-girl.png" class="imgb" alt="">    
                            <span>   
                                叶巧岚
                            </span>
                            <span>
                                2015年1月20日
                            </span>
                        </div>
                    
                    </div>
                </div>
            </div>

            <div class="bottom">
                加载更多
            </div>

        </section>

        <footer>
            <ul>
                <li>
                    <a href="index.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-1.png" alt="">
                        </div>
                        <p>首页</p>
                    </a>
                    
                </li>
                <li>
                    <a href="course.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-2.png" alt="">
                        </div>
                        <p>GIMC</p>
                    </a>        
                </li>
                <li>
                    <a href="article.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-3.png" alt="">
                        </div>
                        <p>文章</p>
                    </a>
                </li>
                <li>
                    <a href="resource.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-4.png" alt="">
                        </div>
                        <p>资源</p>
                    </a>
                </li>
                <li>
                    <a href="course2.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-5.png" alt="">
                        </div>
                        <p>学院</p>
                    </a>
                </li>
            </ul>
        </footer>
        
        

        <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
        <script>        
            var mySwiper = new Swiper ('.swiper-container', {
            //   direction: 'vertical', // 垂直切换选项
              loop: false, // 循环模式选项
            //   autoplay: true,  //设置自动播放 默认是false

              /* autoplay:{
                delay:150 //设置轮播时间
              }, */

              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
                // type:'fraction',
                clickable: true //点击小圆点，控制轮播图切换
              },
              
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              
              // 如果需要滚动条
              scrollbar: {
                el: '.swiper-scrollbar',
              },
            })        
            </script>
    </body>
</html>